1
2
-2023
/ 5
( )
: 3 . :75
:
-
1. (BBS)
BBS ,
2.
-
3. - , -
4.
2
2
-
5. ,
6.
-
7. HTML HTML HTML
HTML
8. HTML divs spans
,
3
2
-2023
/ 5
( )
: 3 . :75
:
-
1. (BBS)
BBS ,
: (BBS)
BBS 1970
, , BBS
BBS 1978
(
)
, 300 ,
300 ,
,
BBS
4
2
1980 1990 BBS ,
, ,
- ,
, ,
, ,
:
1. :
""
2. :
BBS
,
3. :
,
4. : ,
(SysOp)
5. : -
,
6. (SysOp): ,
7. - : BBS - ,
ASCII ANSI
,
- BBS BBS
, BBS
,
, BBS
5
2
BBS ,
:
• ( MS-DOS ),
• ,
• ,
• ( )
1980 , BBS
, 1984 BBS
BBS BBS -
- ,
1980 , 9600 ,
,
, BBS
, PKZIP ( )
DOOM , BBS
BBS 1990 ,
, BBS
- -
BBS , - BBS
BBS , "" BBS
, BBS
BBS ,
6
2
, :
1.
2. : -
,
3. :
, DEF CON
,
4. : ,
, BBS ,
,
,
2.
::
,
, -
, -
, ,
,
(LAN)
7
2
1. :
,
2. : -
,
,
3. ,
4. : ,
,
5.
,
1. HTTP ( ):
o :HTTP
,
HTTP
o e: ,
2. / ( / ):
o :/
,
o :/ , ,
,
3. ( ):
o :FTP
8
2
o : ,
,
4. ( ):
o :SMTP POP3 IMAP
o SMTP
5. ( ):
o :DNS IP
o :DNS IP
-
6. POP3 ( 3) IMAP ( ):
o :
POP3 ,
IMAP ,
o : POP3 IMAP ,
-
7. HTTPS ( ):
o :HTTPS, HTTP
-
o :HTTPS ,
8. ( ):
o :SSH
o :SSH ,
9
2
9. ( ):
o :
o ,
,
OSI
, :
1. : (, , )
2. :
3. : (IP
)
4. :
( TCP )
5. : .
6. :
7. : (, HTTP, FTP).
OSI
, ,
SMTP TCP
, IP
- , 5G,
(IoT)
,
,
IP IPv6
,
10
2
,
-
3. - , -
:- ,
1. -
-, ,
, ,
, - ,
- ,
, -
, -
( ) ( ,
)
2. -
,
,
:
1. - : , - ,
- ( , , )
-
2. - : , "" -
-
3. - :- ,
-
11
2
() -
4. - : - ,
- -
5. : - , ,
- -
, - :
• (): - -
( , , )
• (): -
• (): -
3. -
-
:
1. : ,
- :
username@domain.com , "username" ,
"domain.com" - (, , )
2. : -
, -
3. / :
,
4. : ,
5. :-, - (
)
6. / : - ,
-
7. (, , )
12
2
8.
9. :
(, , )
4. -
- - ,
- , -
- SMTP, POP3 IMAP
a. ( )
• : SMTP
• : "" , - (
) SMTP , -
• : -
( - )
:
• SMTP " " , -
- , (POP3 IMAP)
. 3 ( 3)
• :POP3
• : - ( ) ,
POP3 , -
,
• :POP3 - ,
:
• : - ,
13
2
:
• : ,
,
. ( )
• : IMAP , POP3
• : ( Gmail)
, IMAP
• :IMAP , -
( , ) ,
:
• : -
• : IMAP -
,
:
• - ,
5. -
3
-
-
-
-
-
-
14
2
3
,
( )
-
-
FLEXIBILITY
(-
)
(
)
-
-
6.
-
,
- (SMTP, POP3 IMAP)
- , ,
- ,
-
4.
:
,
,
, -
1.
• :
( ,
15
2
), -
,
• : ,
( , , ,
)
• : ,
, -
2.
• HTTP HTTPS HTTPS HTTP
- ,
HTTP ,
• :
( ) ,
,
,
3.
• - :
()
,
• - -
-
4.
•
16
2
,
-
, ,
,
1.
• :
,
• :
,
• :
2.
•
:
,
,
• : ,
,
• : -
17
2
, (HTML, CSS, JavaScript)
, -
,
1. -
• - ( Google Chrome, Firefox, Microsoft Edge, Safari)
- ,
,
2.
• ,
,
-,
, "" ,
3.
• : , ,
,
• : ( ,
) ,
, -
4.
• : ,
(
, ) ,
,
,
18
2
5.
• :
, -
, ,
,
,
,
:
1.
• ,
,
2.
•
, " "
-
3.
•
4.
• ,
5.
• -
6. -
• ,
, BrowserStack
CrossBrowserTesting
19
2
-
5. ,
: ()
()
,
, FTP ,
, ,
, FTP
( HTML, CSS ) ,
FTP - ,
,
FTP :
1. :
o FTP FTP
, ,
FTP FileZilla, Cyberduck
WinSCP
2. :
o FTP FTP
,
3. :
o , , FTP
(
) , FTP
,
20
2
4. :
o FTP - :
▪ : (,
)
▪ :
5. :
o FTP :
▪ 21.
▪ 20 ( FTP
, )
?
FTP ,
:
1. :
o , FTP ( IP
) ( 21)
FTP
(, )
2. :
o ,
FTP ,
3. :
o , ,
,
4. :
o ( ),
FTP (
) ,
21
2
5. :
o ,
FTP
, FTP
:
1.
FTP, FTP :
• 21
• ( ) 20
:
• .
•
:
• ,
,
• (NAT)
2.
FTP , :
• ,
IP
•
:
• - ,
• NAT
:
• ,
22
2
3. SSL FTP (FTPS)
FTPS FTP
SSL/TLS FTP
,
:
•
• FTP
:
• FTP
• SSL
4. ( )
SFTP FTP
SSH ( ) ,
:
•
• ,
:
• CPU
• FTP
5.
FTP
,
""
:
•
• .
23
2
:
• ( )
• ,
, FTP
:
1. : ,
2. : FTP
3. :FTP ,
4. - :FTP ,
:
1. ( FTP ):
, FTPS SFTP FTP
2. ( FTP ): FTP
,
3. : FTP ,
SFTP - (, ,
)
4. : FTP ,
FTP
, , -
, FTPS SFTP
, ,
, SFTP -
24
2
, FTP
6.
;
, ,
,
, ,
1. ?
-
,
,
, , ,
,
• - : , ,
• - : , ,
(UI)
25
2
?
• : ,
• : ,
• : ,
• :
,
2. ?
,
- , ,
, , ,
• -
• - : , ,
?
•
• :
• : ,
26
2
3.
,
:
1:
,
,
2:
• :
,
• , ,
, -
• :
3:
• : ,
, ,
• : - , ,
• :
,
4.
,
• : -
27
2
• :
-
• : ,
-
• : -
,
• :
• :-
,
5.
,
:
• - :
• : ,
-
• : ,
• :
28
2
6.
,
Balsamiq, Figma, Sketch InVision
, , -
,
,
-
7. HTML HTML HTML
HTML
:HTML ( )
, HTML
,
, HTML HTML
HTML
HTML
HTML -
29
2
HTML :
:
1. <!DOCTYPE html>:
HTML <!DOCTYPE html>
HTML , HTML5
, HTML
• : HTML5 .
• :
2. <html>:
<!DOCTYPE> , <html> , HTML
<html> HTML
• : HTML .
• :
3. <head>:
<head> ,
, ,
• : .
30
2
• : , CSS
<head> :
• <>:
o : <title> </title>
o :
• < ="UTF-8">: ,
,
• <>: CSS ( )
CSS HTML (, ,
)
4. <body>:
<body>
(, , , ) <body>
• : .
• : , ,
<body> , :
• <h1>: (1-6)
, <h1> <h6>
o :<h1> </h1>
o : , .
• <>:
o : <p> .</p>
o : .
5.
HTML ,
, (/)
:
• :<>
• :</html>
31
2
- <html>, <head>, <body> - -
HTML HTML
HTML :
1. <!DOCTYPE html>: HTML5 .
2. <>: HTML
3. <>: - ,
4. <>:
5. <>:
,
HTML
HTML HTML
:
1. (<ol>)
2. (<ul>)
3. (<dl>)
1. (<ol>)
<ol>
, <li> ( )
• :
32
2
• :
1.
2.
3.
•
, --
2. (<ul>)
<ul>
, <li>
• :
• :
o
o
o
•
,
33
2
3. (<dl>)
,
<dt> ( ) , <dd> ( )
• :
• :
o :
o :
•
• :
34
2
• ` :
o
▪
▪
▪
o
o
HTML
:
• : (, ,
)
35
2
o : I. II.
• :
, HTML
HTML
<!DOCTYPE html>, <html>, <head> <body>
HTML , ,
, ,
8. HTML divs spans
,
: Divs Spans HTML
,
,
,
HTML ( )
36
2
<div> <span>
<div> <span> HTML
, ,
, ,
HTML ?
<div> <span> , HTML HTML
( <h1>, <p>, ) ,
,
<header>, , , <img>,
<div> <span>
• <div>: -
<div> ("" ) -
-
,
, ,
,
• <span>:
, <span>
, <span>
,
<div> <span>
:
1. :
, <div>
,
,
( )
2. :<div> <span>
37
2
,
,
3. - : <div> <span> CSS (
)
HTML
, CSS
4. : , -
(, , ) <div>
, CSS
, - ,
5. HTML
,
( ) HTML
<div>
<span>
<div> <span>
HTML ,
<div> <span>
1. <div>
<div>
, , ,
,
<div>
<div class="">
<h1> </h1>
</>
38
2
<div class="nav">
<>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</>
</>
<div class="main-content">
<h2> </h2>
<p> .</p>
</>
<div class=" ">
<p>© 2024 </p>
</>
, <div> - (, , ,
)
CSS
2. <span>
<div> , <span>
,
,
<span>
<p> <span class="highlight"> </span> </p>
39
2
, "" , CSS
{
-: ;
-: ;
}
3. CSS JavaScript <div> <span>
CSS JavaScript <div> <span>
• ( )<div> <span>
, <div> ,
CSS <span> ,
CSS
• <div> <span>
,
,
<div>
<div> <span>
1. <div> <span> : <div> <span>
,
HTML5 <header>, <footer> <article> ,
<div>
2. :<div> <span>
(class="header") ID
(id="main-content") CSS JavaScript
40
2
3. :
, HTML
, <div> <span> HTML
,
, ,
<div>
, <span>
CSS JavaScript ,
,
: ( )
,
